<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Canvas Draw Focus If Needed Example</title>
  <!--
    https://codepen.io/anon/pen/avCnD
    via https://bugzilla.mozilla.org/show_bug.cgi?id=1004579#c10

    https://www.w3.org/html/wg/drafts/2dcontext/html5_canvas_CR/#dom-context-2d-drawfocusifneeded
  -->
  <style>
    body {
      background: white;
    }
    html :focus {
      outline: 2px solid red;
    }
  </style>
</head>
<body>

  <p>Draw the focus outline of a nested input element, if it gets focus.</p>

  <p>Chrome: <code>Enable experimental canvas features</code> in <code>about:flags</code></p>
  <p>Firefox: <code>canvas.customfocusring.enabled</code> in <code>about:config</code></p>

  <canvas id="clock" width="150" height="150">
    <input id="inside" type="text" value="inside">
    <input id="inside2" type="text" value="inside">
  </canvas>

  <script>

    var ctx = document.getElementById('clock').getContext('2d');
    if (!ctx.drawFocusIfNeeded) {
      alert("your browser does not support .drawFocusIfNeeded");
    }

    var i = 1;
    function drawFocus() {
      ctx.clearRect(0, 0, 150, 150);

      ctx.save();
      ctx.beginPath();
      // https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D.rect
      //ctx.rect(10, 10, 30 * i, 30 * i);
      //https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D.arc
      ctx.arc(75, 75, 25 * i, 0, 2 * Math.PI);
      ctx.drawFocusIfNeeded(document.getElementById('inside'));
      ctx.restore();

      i===1 && (i=1.5) || (i=1);
    }

    document.querySelector('input').focus();
    drawFocus();
    setInterval(drawFocus, 200);

  </script>

</body>
</html>
